import { LocalizationContext } from "../../core";

import downloadFile from "./downloadFile";
import FileItem from "./FileItem";
import { FC, ReactElement, useContext } from "react";

interface AttachmentListProps {
  files: FileItem[];
}

const AttachmentList: FC<AttachmentListProps> = ({ files }) => {
  const l10n = useContext(LocalizationContext);

  const renderItem = (file: FileItem): ReactElement => {
    const onClick = (): void => downloadFile(file.fileName, file.data);
    return (
      <li
        className="rpv-attachment__item"
        key={`attachment-${file.fileName}`}
        title={
          (l10n && l10n.attachment
            ? l10n.attachment.clickToDownload
            : "Click to download") as string
        }
        onClick={onClick}
      >
        {file.fileName}
      </li>
    );
  };

  return files.length === 0 ? (
    <div className="rpv-attachment__empty">
      {l10n && l10n.attachment
        ? l10n.attachment.noAttachment
        : "There is no attachment"}
    </div>
  ) : (
    <ul className="rpv-attachment__list">{files.map(renderItem)}</ul>
  );
};

export default AttachmentList;
